<script setup lang="ts">
import { userActionAPI } from '@/api/common'
const props = defineProps(['data', 'bindListObj'])
const emit = defineEmits(['getData', 'recover'])

const zanType = {
    1: 14,
    2: 16,
    3: 17
}

// 点赞
const zanFn = async (item: any) => {
    const res = await userActionAPI({
        bindId: item.commentId,
        action: zanType[item.commentType],
        type: 1
    })
    if (res.code === 0) {
        uni.showToast({
            title: '操作成功',
            icon: 'none'
        })

        emit('getData')
    }
}

// 回复
const recoverFn = (item: any) => {
    emit('recover', item)
}

// 跳转详情
const todetail = (item: any) => {
    // 1.产品 2.视频 3.帖子

    if (item.commentType == 1) {
        // 跳转产品
        uni.navigateTo({
            url: '/views/subViews/findProduct/productDetail/index?id=' + item.bindId
        })
        return
    }

    if (item.commentType == 3) {
        // 跳转帖子
        uni.navigateTo({
            url: '/views/subViews/post/postDetail/index?id' + item.bindId
        })
        return
    }
}
</script>

<template>
    <view v-for="item in data" :key="item.id">
        <view class="item p-[30rpx] flex-between">
            <view class="left flex-row">
                <image class="left-img" mode="aspectFill" :src="item.avatar"></image>
                <view class="flex-column-between left-info flex-1-0-0" @click.stop="todetail(item)">
                    <view class="title"
                        ><text>{{ item.nickname }}</text></view
                    >
                    <view>
                        <text class="subtitle"
                            >{{ bindListObj[item.action] }} {{ item.createTime }}</text
                        >
                    </view>
                    <view class="recover flex-1-0-0 flex-column gap-[10rpx]" v-if="item.commentId">
                        <view class="recover-content"> {{ item.content }} </view>
                        <view class="by-comment">
                            {{ item.commentToContent }}
                            <!--                            <fui-overflow-hidden-->
                            <!--                                size="24"-->
                            <!--                                color="#666666"-->
                            <!--                                :text="'啦啦啦啦啦士大夫士大夫士大夫了手动阀十分四点零分数量'"-->
                            <!--                            ></fui-overflow-hidden>-->
                        </view>
                        <view class="flex-row btn-box gap-[20rpx]">
                            <view class="btn flex-center" @click.stop="zanFn(item)">点赞</view>
                            <view class="btn flex-center" @click.stop="recoverFn(item)">回复</view>
                        </view>
                    </view>
                </view>
            </view>
            <view>
                <image class="right-img" mode="aspectFill" :src="item.avatar"></image>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.item {
    border-bottom: 1rpx solid #efefef;
    .left {
        gap: 20rpx;
        .left-img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 999rpx;
        }
        .left-info {
            width: 480rpx;
            gap: 10rpx;
        }

        .title {
            font-size: 13px;
            font-weight: 700;
            color: #333333;
        }
        .subtitle {
            font-size: 11px;
            color: #666666;
        }
        .recover {
            .by-comment {
                border-left: 2px solid #e5e5e5;
                color: #666666;
                padding-left: 10rpx;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .btn {
                border-radius: 999rpx;
                background-color: #f5f5f5;
                width: 120rpx;
                height: 60rpx;
                font-size: 12px;
                color: #333333;
            }
        }
    }
    .right-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
    }
}
</style>
